<!--
 * @customMade: 赵宇
 * @Date: 2021-11-29 17:53:30
 * @LastEditTime: 2024-07-26 18:01:32
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \yww-uni-app\components\popupHttp\popupHttp.vue
-->
<template>
  <uv-popup mode="bottom" @close="onClose" ref="popupRef" border-radius="20" closeable safe-area-inset-bottom>
    <view class="title" v-if="!isSearch">
      {{ props.title }}
      <uv-loading mode="circle" color="#409EFF" size="40" v-if="loading"></uv-loading>
    </view>
    <view class="search" v-else>
      <uv-search v-model="search" showAction actionText="搜索" animation></uv-search>
    </view>
    <scroll-view scroll-y class="scroll">
      <view
        v-for="(item, index) in search ? props.data.filter(r => r.name.includes(search)) : props.data"
        :key="item.id"
        class="scroll-item"
        @click="onChange(item)"
        :class="{ active: item.active }"
      >
        <view class="scroll-item-name">{{ item.name }}</view>
        <view class="scroll-item-icon">
          <uv-icon name="checkbox-mark" color="#3c9cff" size="35"></uv-icon>
        </view>
      </view>
      <uv-empty v-if="!props.data.length"></uv-empty>
    </scroll-view>
    <view class="buttons">
      <!-- <view class="buttons-item" v-if="activeArr.length">
        <uv-button type="error" shape="circle" ripple plain @click="onReset"> 重置 </uv-button>
      </view> -->
      <view class="buttons-item">
        <uv-button type="warning" shape="circle" ripple plain @click="onClose" class="buttons-item">取消</uv-button>
      </view>
      <view class="buttons-item">
        <uv-button type="primary" shape="circle" ripple plain @click="onSave" class="buttons-item">确认</uv-button>
      </view>
    </view>
  </uv-popup>
</template>

<script setup>
  import { reactive, toRefs, watch, ref, defineEmits, defineExpose, defineProps } from 'vue';
  let popupRef = ref();
  let search = ref();
  let open = () => {
    popupRef.value.open();
  };
  defineExpose({ open });
  const props = defineProps({
    data: {
      type: Object,
      default: () => {
        return [];
      }
    },
    title: {
      type: String,
      default: '标题'
    },
    isSearch: {
      type: Boolean,
      default: true
    },
    multiple: {
      type: Boolean,
      default: false
    }
  });
  let activeArr = ref([]);
  let loading = ref(false);
  watch(
    () => props.data,
    () => {
      props.data.map(r => {
        if (r.active) activeArr.value.push(r);
      });
    },
    { immediate: true }
  );
  // 选中当前项
  let onChange = ({ id }) => {
    let item = props.data.find(r => r.id === id);
    if (props.multiple) {
      item.active = !item.active;
      let activeIndex = activeArr.value.map(r => r.id).findIndex(r => r === item.id);
      if (activeIndex < 0) {
        activeArr.value.push(item);
      } else {
        activeArr.value.splice(activeIndex, 1);
      }
      return;
    }
    props.data.map(r => {
      r.active = false;
    });
    item.active = true;
    activeArr.value = [];
    activeArr.value.push(item);
  };
  // 重置
  const onReset = () => {
    props.data.map(r => {
      r.active = false;
    });
    activeArr.value = [];
  };
  // 关闭
  const onClose = () => {
    popupRef.value.close();
  };
  let emit = defineEmits(['onSuccess']);
  // 保存
  const onSave = () => {
    onClose();
    emit('onSuccess', activeArr.value);
  };
</script>

<style lang="scss" scoped>
  .search {
    padding: 17rpx;
    padding-right: 34rpx;
  }
  .title {
    font-size: 40rpx;
    text-align: center;
    padding: 20rpx 0;
    color: #303133;
    font-weight: bold;
    letter-spacing: 6rpx;
  }
  .scroll {
    max-height: 60vh;
    display: flex;
    align-items: center;
    &-item {
      font-size: 24rpx;
      text-align: center;
      color: #909399;
      margin: 8.5rpx 0;
      letter-spacing: 6rpx;
      position: relative;
      border-top: 1px solid #f2f6fc;
      &-icon {
        position: absolute;
        right: 20rpx;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0;
        transition: all 0.5s;
      }
    }
    &-list:last-child {
      border-bottom: 1px solid #f2f6fc;
    }
    .active {
      color: #606266;
      transition: all 1s;
      .scroll-item-icon {
        opacity: 1;
        color: #409eff;
      }
    }
  }
  .buttons {
    display: flex;
    padding: 5rpx;
    &-item {
      flex: 1;
      margin: 0 17rpx;
    }
  }
</style>
